<template>
  <section class="section-container">
    <div class="description-list">
      <div class="desc-list-item" v-for="(item, index) in list" :key="index">
        <div class="left">
          <h3>{{ item.title }}</h3>
          <div class="desc-sub-title">
            {{ item.subTitle }}
          </div>
        </div>
        <div class="right">
          <arrowRight2></arrowRight2>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import arrowRight2 from '~/assets/images/svg/arrow-right-2.vue'

const list = ref([
  {
    title: 'For Creators',
    subTitle: `Create production-quality visual assets for your projects with unprecedented quality, speed, and style-consistency.`,
    url: ''
  },
  {
    title: 'For Teams',
    subTitle: `Bring your team's best ideas to life at scale, with our intuitive AI-first creative suite designed for collaboration and built for business.`,
    url: ''
  },
  {
    title: 'For Developers',
    subTitle: `Experience content creation excellence with Leonardo.AI's API. With unmatched scalability, effortlessly tailor outputs to your brand guideline`,
    url: ''
  }
])
</script>

<style lang="scss" scoped>
.section-container {
  max-width: 1280px;

  // 为了在小屏幕的时候，左右有间距
  padding-left: 20px;
  padding-right: 20px;

  margin-left: auto;
  margin-right: auto;
  margin-top: 24px;
  margin-bottom: 24px;

  display: flex;
  justify-content: center;
  align-items: center;
}

.description-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  /**
  最小值：1.875rem  等于 1.875 * 16px = 30px
  首选值：-4.6124rem + 10.453vw
        -4.6124rem 等于 -4.6124 * 16px = -73.7984px。
        10.453vw 是视口宽度的 10.453%。
  最大值：3.75rem  等于 3.75 * 16px = 60px。
   */
  grid-gap: clamp(1.875rem, -4.6124rem + 10.453vw, 3.75rem);

  .desc-list-item {
    display: flex;
    column-gap: 12px;
    padding: 28px 28px 18px 28px;

    background:
      linear-gradient(#0e1011, #09090a) padding-box,
      linear-gradient(to bottom, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.08)) border-box;
    border-radius: 22px;
    border: 2px solid transparent;
    transition: all 0.1s ease-in-out;
    cursor: pointer;

    &:hover {
      background:
        linear-gradient(#0e1011, #0f1012) padding-box,
        linear-gradient(to bottom, #db519e47, #b14bf452, #6e7bfc2b) border-box;

      box-shadow: 2px 2px 9px 3px rgba(161, 128, 255, 0.3);
    }

    &:hover .right {
      transform: rotate(45deg);

      background:
        linear-gradient(81deg, #db519e 13.83%, #b14bf4 49.5%, #6e7bfc 85.32%) padding-box,
        linear-gradient(to bottom, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.08)) border-box;
      border: 6px solid #b14bf40d;
    }
  }

  h3 {
    font-size: 22px;
    font-weight: 500;
    max-width: 300px;
    margin-bottom: 0.8rem;
  }

  .desc-sub-title {
    max-width: 295px;
    font-size: 14px;
    line-height: 1.3;
    color: #c5c9d9;
  }
}

.right {
  padding: 6px;
  width: auto;
  align-self: flex-start;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: #1c212a;
  transition: all 0.15s ease-in-out;
  border: 6px solid transparent;

  svg {
    height: 24px;
    width: 24px;
  }
}

// 移动端适配

@media screen and (max-width: 992px) {
  .description-list {
    grid-template-columns: repeat(4, 1fr);

    .desc-list-item {
      // 每个子类横跨2列， 也就是50%的宽度
      grid-column: span 2;
    }

    .desc-list-item:nth-child(3) {
      // 第三个子类横跨2列，但是是从第2列开始横跨， 上面将容器分为4列， 所以视觉上看，这里展示在上面的2个元素的中间
      // 在浏览器中打开 调试工具，点击grid 就比较清晰
      grid-column: 2 / span 2;
    }
  }
}

@media (max-width: 768px) {
  .description-list {
    grid-template-columns: 1fr;
    justify-items: center;

    .desc-list-item {
      max-width: 450px;
      // 去掉默认的跨列
      grid-column: auto !important;
    }
  }
}
</style>
